<!DOCTYPE html>
<html>
<@h.head />
<body class="homepage" style="background-image: url(${path}/static/images/services/bg_services.png)">
	<@h.nav />
	<div class="h30"></div>
	<section id="content" class="shortcode-item">
        <div class="container">
            <div class="row">
                <div>
                    <div class="tab-wrap">
                   		<div class="parrent pull-left">
                             <ul class="nav nav-tabs">
                                 <li class="active"><a href="javascript:void(0)" data-toggle="tab" data-filter="*">所有</a></li>
                                 <#list productType as record>
                                 <li><a href="javascript:void(0)" data-toggle="tab" data-filter=".class_${record.value}">${record.label}</a></li>
                                 </#list>
                             </ul>
						</div>
                    </div><!--/.tab-wrap-->
                </div><!--/.col-sm-6-->
            </div><!--/.row-->
        </div><!--/.container-->
    </section>
    <section id="portfolio" class="pt20 no-margin">
        <div class="container">
            <div class="row">
                <div class="portfolio-items">
                	<#list paths as record>
                		<div class="portfolio-item col-xs-12 col-sm-4 col-md-3 class_${(record.type)!}">
                        <div class="recent-work-wrap">
                            <img class="img-responsive" src="${(record.path)!}" alt="">
                            <div class="overlay">
                                <div class="recent-work-inner">
                                    <h3><a href="${path}/product/detail/${(record.id)!}">${(record.name)!}</a></h3>
                                    <p>${(record.content)!}</p>
                                    <a class="preview fr" href="${path}/product/detail/${(record.id)!}"><i class="fa fa-eye"></i> VIEW MORE</a>
                                </div> 
                            </div>
	                        </div>
	                    </div><!--/.portfolio-item-->
                	</#list>
                </div>
                
                <input type="hidden" id="href__" value="/product/${id!0}?page={{pageNum}}">
                <@h.page />
            </div>
        </div>
    </section><!--/#portfolio-item-->
	<@h.foot />
</body>
<style>
.nav-tabs>li.active>a:after{
	display: inherit;
}
</style>
<script type="text/javascript">
$(function(){
	$(".parrent ul li").click(function(){
		var style = document.createElement('style');
		style.innerText = ".nav-tabs>li.active>a:after { border-width: 20px " + ($(this).css("width").replace("px","")/2) + "px}";
		document.body.appendChild(style);
	});
});
</script>
</html>